<template>
  <div class="login">
     <div class="pic">
      <img src="../../assets/images/login/logo.png" alt="">
     </div>
     <div class="textInput">
      <input  type="number" placeholder="请输入手机号" v-model="code" >
      <input type="password" placeholder="请输入密码" v-model="password">
     </div>
     <div class="button">
      <input type="button" value="登录" @click="checkPhone">
      <input type="button" value="首次使用,请激活">
     </div>
    <div class="password"><p>忘记密码 ?</p></div>
  </div>
</template>

<script>
// import {placeholder} from '@/common/less/mixin.less'
export default {
  data() {
    return {
      code: "15116973957",
      password: "123456"
    };
  },
  // mixins:[placeholder],
  created() {},
  methods: {
    login() {
      this.$axios
        .get(process.env.loginUrl + "/passport/passwdlogin", {
          params: { loginCode: this.code, loginPasswd: this.password }
        })
        .then(res => {
          if (res.data.success) {
            this.$router.push({
              name: "index"
            });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    checkPhone() {
      if (!/^1(3|4|5|7|8)\d{9}$/.test(this.code)) {
        alert("手机号码有误，请重填");
        return false;
      } else if (!/^(\w){6,10}$/.exec(this.password)) {
        alert("密码有误，请重填");
        return false;
      } else {
        this.login();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  background-color: #44a6ff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .pic {
    width: 2.74rem;
    height: 1.1rem;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 1.5rem;
    margin-bottom: 1.2rem;
    img {
      width: 2.74rem;
      height: 1.1rem;
    }
  }
  .textInput {
    height: 2.01rem;
    width: 6.7rem;
    position: absolute;
    top: 4.4rem;
    margin-left: 0.4rem;
    input {
      display: block;
      -webkit-appearance: none;
      border-radius: 0;
      width: 100%;
      text-align: center;
      font-size: 0.28rem;
      height: 1rem;
      color: #fff;
      background: none;
      border: none;
      outline: none;
      /* 谷歌浏览器去input背景色 */
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #44a6ff inset;
        outline: none;
        -webkit-text-fill-color: #fff; //设置字体颜色
      }
      /* 更改input placeholder颜色 */
      &::-webkit-input-placeholder {
        color: #fff;
      }
      &:-moz-placeholder {
        color: #fff;
      }
      &::-moz-placeholder {
        color: #fff;
      }
      &:-ms-input-placeholder {
        color: #fff;
      }
      &:first-child {
        border-bottom: 1px solid #fff;
      }
    }
  }
  .button {
    width: 100%;
    margin-top: 4.2rem;
    padding: 0 0.4rem;
    box-sizing: border-box;
    input {
      display: block;
      background: #ffffff;
      border-radius: 1rem;
      width: 100%;
      height: 1rem;
      border: none;
      outline: none;
      font-family: PingFangSC-Regular;
      font-size: 0.36rem;
      color: #78bfff;
      text-align: center;
      &:last-child {
        border: 2px solid #ffffff;
        background-color: transparent;
        color: #fff;
        margin-top: 0.2rem;
      }
    }
  }
  .password {
    position: absolute;
    margin-top: 3.5rem;
    margin-left: 50%;
    transform: translateX(-50%);
    p {
      font-family: PingFangSC-Regular;
      font-size: 0.26rem;
      color: #ffffff;
      letter-spacing: 0;
      text-align: center;
    }
  }
}
</style>
